<template>
  <div class="radio-classification">
    <nav-bar class="nav-bar">
      <div slot="left">
        <img src="../../../assets/img/common/back.svg" alt="" @click="back">
      </div>
      <div slot="center">
        <p>电台分类</p>
      </div>
    </nav-bar>
    <div class="contain">
      <radio-classification-item v-for="(item,index) of classitem"
                                 :key="index" v-bind:item="item"
                                 @click.native="clickitem(index)">
      </radio-classification-item>
    </div>
    <square-recommand v-bind:lists="recommandList" ></square-recommand>
    <square-recommand v-bind:lists="recommandList2"></square-recommand>

  </div>
</template>

<script>
  import NavBar from "../../../components/common/navbar/NavBar";
  import RadioClassificationItem from "./RadioClassificationItem";
  import SquareRecommand from "../../../components/content/SquareRecommand/SquareRecommand";
  import {getRadioClassification,getRadioTypeRecommand} from "../../../network/radio";
  export default {
        name: "RadioClassification",
        components:{
            RadioClassificationItem,
            NavBar,
            SquareRecommand
        },
        data(){
            return{
              classitem:[],
                itempic:'',
                itemfont:'',
                itemid:0,
                item:{},
              recommandList:[],
                recommandpic:'',
                recommandfont:'',
                recommandid:'',
                recommanditem:{},
              recommandList2:[],
                recommandpic2:'',
                recommandfont2:'',
                recommandid2:'',
                recommanditem2:{},
            }
        },
        methods:{
            back(){
                this.$router.back();
            },
            clickitem(index){
                this.$toast.show('功能'+ (index+1) +'该功能尚未开放')
            }
        },
        created() {
            getRadioClassification().then(res=>{
                // console.log(res.data.categories)
                for(let item of res.data.categories){
                    this.itempic = item.pic56x56Url
                    this.itemfont = item.name
                    this.itemid = item.id
                    this.item = {
                        pic:this.itempic,
                        font:this.itemfont,
                        id:this.itemid,
                    }
                    this.classitem.push(this.item)
                    // console.log(this.classitem)
                }
            })
            getRadioTypeRecommand(3).then(res=>{
                // console.log(res.data.djRadios)
                for(let item of res.data.djRadios){
                    this.recommandpic = item.picUrl
                    this.recommandfont =item.rcmdtext
                    this.recommandid = item.id
                    this.recommanditem ={
                        picUrl:this.recommandpic,
                        name:this.recommandfont,
                        id:this.recommandid
                    }
                    this.recommandList.push(this.recommanditem)
                    // console.log(this.recommandList)
                }
            })
            getRadioTypeRecommand(5).then(res=>{
                // console.log(res.data.djRadios)
                for(let item of res.data.djRadios){
                    this.recommandpic2 = item.picUrl
                    this.recommandfont2 =item.rcmdtext
                    this.recommandid2 = item.id
                    this.recommanditem2 ={
                        picUrl:this.recommandpic2,
                        name:this.recommandfont2,
                        id:this.recommandid2
                    }
                    this.recommandList2.push(this.recommanditem2)
                    // console.log(this.recommandList2)
                }
            })
        }

    }
</script>

<style scoped>
  .radio-classification{
    width: 100%;
    position: relative;
    top: 0px;
  }

  .nav-bar{
    position: fixed;
    background-color: white;
  }

  .contain{
    padding-top: 44px;
    display: grid;
    width: 100%;
    grid-template-columns: 25% 25% 25% 25%;
    text-align: center;
  }
</style>